<template>
  <div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <!--first second  third -->
      <el-tab-pane label="问卷概述" name="first">
        <!-- <div>
          <h1>{{ ip }}</h1>
          <h1>{{ cityname }}</h1>
        </div> -->
        <div class="firstmain">
          <div class="firstmain_a">
            <div class="left">
              <ul>
                <li>
                  填写次数<strong class="yb" @click="open">修改</strong
                  ><el-switch
                    v-model="value_a"
                    active-color="#13ce66"
                    inactive-color="#DFDFDF"
                  >
                  </el-switch>
                </li>
              </ul>
            </div>
            <div class="right">
              <ul>
                <li>
                  问卷开启/停止
                  <strong class="yb" @click="updateState">
                    <el-switch
                      v-model="value_b"
                      active-color="#13ce66"
                      inactive-color="#DFDFDF"
                    >
                    </el-switch>
                  </strong>
                </li>
              </ul>
            </div>
          </div>
          <div class="firstmain_b">
            <div class="a">
              <p>{{ newsList.total }}</p>
              <h4>问卷填写总数</h4>
            </div>
            <div class="b">
              <p>{{ newsList.new }}</p>
              <h4>问卷今日新增数据</h4>
            </div>
            <div class="c">
              <p>{{ newsList.time }}秒</p>
              <h4>问卷平均填写时长</h4>
            </div>
            <div class="d">
              <p>{{ newsList.count }}</p>
              <h4>问卷访问次数</h4>
            </div>
          </div>
          <div class="firstmain_c">
            <div class="wz">地区分布</div>
            <div class="map">
              <!-- 中国地图的组件 -->
              <mapdiv />
            </div>
            <div class="button"></div>
          </div>
        </div>
      </el-tab-pane>
      <!-- 文字的数据分析 -->
      <el-tab-pane label="数据" name="second">
        <div class="data">
          <el-table :data="list.text" border>
            <el-table-column
              v-for="(value, key, index) in list.head"
              :key="key"
              :index="index"
              :prop="key"
              :label="value"
              width="180"
            >
              <!--  template 不能使用v-if  v-for和v-if不能同时使用-->
              <template slot-scope="scope">
                <div
                  v-if="checkImgType(list.text[scope.$index][key])"
                  class="imgs"
                >
                  <img
                    :src="imgsUrl + list.text[scope.$index][key]"
                    width="80px"
                    height="100px"
                  />
                </div>
                <div v-if="!checkImgType(list.text[scope.$index][key])">
                  <p>{{ list.text[scope.$index][key] }}</p>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!--导出csv 到excel表格上去   export-->
        <el-button type="primary" class="csv" @click="exportcsv()"
          >导出excel表格</el-button
        >
      </el-tab-pane>
      <!-- 报表的数据分析 -->
      <el-tab-pane label="报表" name="third">
        <!-- 其他的表格 -->
        <div class="new">
          <brokenlinediv />
        </div>
        <div class="main">
          <div class="left">
            <!--select是选择分析的选项   echart是相对应的图表  -->

            <div class="select">
              <h4>选择你想分析的单选题目</h4>
              <div>
                <el-select
                  v-model="singleValue"
                  placeholder="请选择"
                  @change="selectSingle(singleValue)"
                >
                  <el-option
                    v-for="item in singleTitle"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </div>
              <h4>选择你想要展示的图形</h4>
              <div>
                <el-select
                  v-model="chartValue"
                  placeholder="请选择"
                  @change="selectSingleGraphical(chartValue)"
                >
                  <el-option
                    v-for="item in singlegraphical"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="echart">
              <!-- 展示相关表格 图形的组件 :data="singleList" -->
              <!-- 饼状图 -->
              <piechartdiv v-show="echartshow.piechart" ref="pieChild" />
              <!-- 柱状图 -->
              <columnchardiv
                v-show="echartshow.columnchart"
                ref="columnChild"
              />
            </div>
          </div>
          <div class="right">
            <div class="select">
              <h4>选择你想分析的多选题目</h4>
              <div>
                <el-select
                  v-model="multipleValue"
                  placeholder="请选择"
                  @change="selectMultiple(multipleValue)"
                >
                  <el-option
                    v-for="item in multipleTitle"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </div>
              <h4>选择你想要展示的图形</h4>
              <div>
                <el-select
                  v-model="multiplechartValue"
                  placeholder="请选择"
                  @change="selectmultipleGraphical(multiplechartValue)"
                >
                  <el-option
                    v-for="item in multiplegraphical"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="echart">
              <!-- 展示相关表格 词云 wordcloudChild-->
              <!-- 雷达图 -->
              <radarchartdiv
                ref="radarcharChild"
                v-show="echartshow.radarchart"
              />
              <wordcloudchartdiv
                v-show="echartshow.wordcloundchart"
                ref="wordcloudcharChild"
              />
            </div>
          </div>
        </div>
      </el-tab-pane>
      <!-- 导入表格 -->
      <el-tab-pane label="导入数据" name="fourth">
      <!-- 导入excel的组件start -->
        <importExcel />
      <!-- 导入excel的组件end -->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import axios from "axios";
import {
  analysisData,
  selectSingle,
  selectMultiple,
  selectSinglePie,
  selectMultipleWord,
  selsectquestionnaire,
  exportExcel,
  selectState,
  updateState,
} from "../../../network/index";
import Columnchart from "../echart/columnchart.vue";
import columnchartVue from "../echart/columnchart.vue";
import Piechart from "../echart/piechart.vue";
// 导入防抖
import { Debounce } from "../../../network/util";
export default {
  data() {
    return {
      // 问卷的详情信息
      newsList: [],
      // el-switch绑定的按钮
      value_a: true,
      value_b: true,
      echartshow: {
        piechart: true,
        columnchart: false,
        radarchart: true,
        wordcloundchart: false,
      },
      // 图片拼接
      imgsUrl: "",
      activeName: "first",
      list: {
        text: [],
      },
      // 单选绑定得到的value
      singleValue: "",
      multipleValue: "",
      //单选 选择想要展示的图形
      singlegraphical: [
        // 饼状图 Piechart
        { value: "饼状图" },
        // 柱形图 Columnchart
        { value: "柱形图" },
      ],
      chartValue: "",
      // 多选 选择想要展示的图形
      multiplegraphical: [{ value: "雷达图" }, { value: "词云图" }],
      multiplechartValue: "",

      // 使用到的id和type
      radio: "radio",
      multiple: "multiple",
      singleTitle: [],
      multipleTitle: [],
      singleList: [],
      multipleList: [],
    };
  },
  methods: {
    select() {
      selsectquestionnaire({ formId: localStorage.getItem("id") }).then(
        (res) => {
          if (res.data != null) {
            this.newsList = res.data;
            // console.log(res.data)
          }
        }
      );
    },
    // 问卷概述的修改事件
    open() {
      this.$alert("<el-input type=`text`/> ", "请输入可以填写的次数", {
        dangerouslyUseHTMLString: true,
      });
    },
    handleClick(tab, event) {
      // console.log(tab, event);
      // console.log("111");
      // console.log(this.$root.imgsurl)
    },
    // 获取所有的当前问卷的详情信息

    findDataId() {
      const id = localStorage.getItem("id");
      const pageNum = localStorage.getItem("pageNum");
      // const tk=localStorage.getItem('token')
      analysisData({ form_id: id, pageNum: pageNum }).then((res) => {
        if (res != null) {
          // console.log(res.data);
          this.list = res.data;
          // let array = res.data.text;
          // 回传给后端的数据 进行csv格式的转换
          // console.log(this.list);
        }
      });
    },
    // 判断图片   接受数据并且进行遍历判断 如果是图片就返回展示图片的表格
    checkImgType(file) {
      //用文件名name后缀判断文件类型，可用size属性判断文件大小不能超过500k ， 前端直接判断的好处，免去服务器的压力。
      if (!/\.(jpg|jpeg|png|GIF|JPG|PNG)$/.test(file)) {
        // console.log(file);
        return false;
      } else {
        // 得到的图片
        // console.log(file)
        return true;
      }
    },
    // e-chart
    // drawLine() {
    // }
    // 选择想要分析的单选题
    selectSingle(value) {
      // console.log(value)
      // console.log("单选" + value);
      // 根据value向后端发送数据库的请求
      selectSinglePie({ itemId: value }).then((res) => {
        if (res.data != null) {
          // console.log(res.data);
          this.singleList = res.data;
          // console.log(this.singleList)
          // 调用子组件的方法
          this.$refs.pieChild.updateData(this.singleList);
          this.$refs.columnChild.updateData(this.singleList);
        }
      });
    },
    // 选择想要的单选图形
    selectSingleGraphical(value) {
      // console.log(value);
      if (value == "饼状图") {
        this.echartshow.piechart = true;
        this.echartshow.columnchart = false;
      } else if (value == "柱形图") {
        this.echartshow.columnchart = true;
        this.echartshow.piechart = false;
      }
    },
    // selectmultipleGraphical  选择想要的多项图形
    selectmultipleGraphical(value) {
      if (value == "雷达图") {
        this.echartshow.radarchart = true;
        this.echartshow.wordcloundchart = false;
      } else if (value == "词云图") {
        this.echartshow.radarchart = false;
        this.echartshow.wordcloundchart = true;
      }
    },
    // 选择想要分析的多选题
    selectMultiple(value) {
      // 得到当前的这个题目
      // console.log(value)
      selectMultipleWord({ itemId: value }).then((res) => {
        if (res.data != null) {
          // 多选答案的数据   value是当前的这个题目的id
          this.multipleList = res.data;
          // 这个是多选题里面的答案
          // console.log(res.data)
          this.$refs.radarcharChild.updateData(this.multipleList);
          this.$refs.wordcloudcharChild.updateData(this.multipleList);
          // console.log(res.data)
        }
      });
      // console.log(value);
    },
    // 启动的时候就查询这个数据
    //查询所有单选题的题目
    selectSingleTitle() {
      selectSingle({ formId: localStorage.getItem("id"), type: "radio" }).then(
        (res) => {
          if (res != null) {
            // console.log(res.data)
            this.singleTitle = res.data;
          }
        }
      );
    },
    // 查询所有多选题的题目
    // selectMultiple
    selectMultipleTitle() {
      selectMultiple({
        formId: localStorage.getItem("id"),
        type: "multiple",
      }).then((res) => {
        if (res != null) {
          // console.log(res.data)
          this.multipleTitle = res.data;
        }
      });
    },

    // 导出csv格式  带有防抖功能 5s后才可以再次发送axios请求
    exportcsv: Debounce(function () {
      // let time=Date.now()

      // console.log(time);
      axios
        .get(
          "http://47.106.246.177:8080//answer/excelDownload?formId=" +
            localStorage.getItem("id"),
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
            responseType: "blob",
          }
        )
        .then((res) => {
          // console.log(res.data)
          const blob = new Blob([res.data]);
          const fileName = "xxx.xls";
          const linkNode = document.createElement("a");
          linkNode.download = fileName; //a标签的download属性规定下载文件的名称
          linkNode.style.display = "none";
          linkNode.href = URL.createObjectURL(blob); //生成一个Blob URL
          document.body.appendChild(linkNode);
          linkNode.click(); //模拟在按钮上的一次鼠标单击
          URL.revokeObjectURL(linkNode.href); // 释放URL 对象
          document.body.removeChild(linkNode);
          this.$message({
            message:
              "恭喜你，导出数据成功! 如果想再次导出数据 , 请等候五秒,再导出!",
            type: "success",
          });
        });
    }, 5000),
    // 查询表单状态
    selectState() {
      selectState({ formId: localStorage.getItem("id") }).then((res) => {
        if (res != null) {
          // console.log(res.data)
          if (res.data.state == 0) {
            // console.log(res.data.state)
            this.value_b = false;
          } else {
            this.value_b = true;
          }
        }
      });
    },
    // 修改表单填写状态 0是不允许 1是允许
    updateState() {
      if (this.value_b == true) {
        updateState({ formId: localStorage.getItem("id"), state: 1 }).then(
          (res) => {
            if (res != null) {
              console.log(res.data);
              this.$message({
                message: "已经打开当前问卷填写功能",
                type: "success",
              });
            }
          }
        );
      } else if (this.value_b == false) {
        updateState({ formId: localStorage.getItem("id"), state: 0 }).then(
          (res) => {
            if (res != null) {
              console.log(res.data);
              this.$message({
                message: "已经关闭当前问卷填写功能",
                type: "warning",
              });
            }
          }
        );
      }
    },
  },
  created() {
    this.findDataId();
    // 查询问卷的详情信息
    this.select();
    this.imgsUrl = this.$root.imgsurl;
    // 传输单选的第一个value   传输多选的第一个value
    this.selectSingleTitle();
    this.selectMultipleTitle();
    // 查询表单状态
    this.selectState();
  },
  // 加载组件
  components: {
    // 导入excel表格
    importExcel: () => import(/**/ "../children/ImportExcel"),
    // echart
    // 导出csv成功页面
    // 单选 饼状图
    piechartdiv: () => import(/**/ "../echart/piechart"),
    // 单选 柱状图
    columnchardiv: () => import(/**/ "../echart/columnchart"),
    // 多项 词云
    wordcloudchartdiv: () => import(/**/ "../echart/wordcloudchart"),
    // 多选 雷达图
    radarchartdiv: () => import(/**/ "../echart/radarchart"),
    // 整体 折线图
    brokenlinediv: () => import(/* */ "../echart/brokenlinechart"),
    // 整体 中国地图
    mapdiv: () => import(/**/ "../echart/mapchart"),
  },
  mounted() {},
};
</script>
<style scoped>
@import "../../../assets/css/questionnaire/analysis.css";
</style>